<template>
  <div class="E-playlist-card">
    <div
      @click="skipDetail(item.id)"
      class="box-content bg-image-cover"
      v-lazy:background-image="item.coverImgUrl"
      v-maintain
    >
      <p class="play-num">
        <span>
          <i class="el-icon-headset" />
          {{item.playCount | optimization}}
        </span>
      </p>
      <p class="creator text-ellipsis">
        <el-popover
          trigger="hover"
          placement="top"
          :open-delay="1000"
          popper-class="el-popover-narrow"
          v-model="item.__show_popover"
        >
          <E-popover-user-card :id="item.userId" v-if="item.__show_popover" />
          <span @click.stop="skipUser(item.userId)" slot="reference">
            <i class="el-icon-user" />
            {{item.creator.nickname}}
          </span>
        </el-popover>
      </p>
    </div>
    <p class="box-title">
      <span @click="skipDetail(item.id)">{{item.name}}</span>
    </p>
  </div>
</template>

<script>
export default {
  props: ['item'],
  components: {
    'E-popover-user-card': () => import('./E-popover-user-card')
  },
  methods: {
    skipUser(id) {
      console.log('跳转用户页', id);
      this.$message('该功能暂未完善，敬请期待 ~');
    },
    skipDetail(id) {
      console.log('跳转详细页', id);
      this.$message('该功能暂未完善，敬请期待 ~');
    }
  },
  directives: {
    maintain: {
      inserted(el) {
        const { width } = getComputedStyle(el, null);
        // eslint-disable-next-line no-param-reassign
        el.style.height = width;
      }
    }
  },
  filters: {
    optimization(val) {
      if (window.parseInt(val / 100000)) {
        return `${Math.round(val / 10000)}万`;
      }
      return val;
    }
  }
};
</script>

<style lang="scss" scoped>
.E-playlist-card {
  @import "@/plug-in/_base.scss";
  margin-bottom: 20px;
  line-height: 20px;
  & > .box-content {
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
    height: 200px;
    & > .play-num {
      position: absolute;
      top: 0;
      right: 0;
      width: 60%;
      color: #fff;
      text-align: right;
      padding-right: 7px;
      font-size: 12px;
      background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
    }
    & > .creator {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      color: #fff;
      padding: 0 10px;
      line-height: 30px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
      & > i {
        margin-right: 3px;
      }
    }
  }
  & > .box-title {
    @include row-dot-show(2);
    height: 40px;
    & > span {
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
  }
}
</style>
